<template>
	<view>


		<view class="i-lx-zt">
			<map style="width: 100%; height: 300px;" :latitude="latitude" :longitude="longitude" :markers="marker">
			</map>
			<view class="i-lx-body">
				<view class="flex_box">
					<text class="iconfont icon-ditu2"></text>
					<text class="flex">{{dizhi}}</text>
				</view>
				<view class="flex_box">
					<text class="iconfont icon-lianxiren"></text>
					<text class="flex">刘先生</text>
				</view>
				<view class="flex_box" @tap="go" :data-tel="tel">
					<text class="iconfont icon-iconfontdianhua"></text>
					<text class="flex">{{tel}}</text>
				</view>
				<view class="flex_box"  @tap="go" :data-tel="phone">
					<text class="iconfont icon-shouji"></text>
					<text class="flex">{{phone}}</text>
				</view>

			</view>
		</view>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				tel:'0731-88104666',
				phone:"139-7494-7968",
				dizhi:"长沙市雷锋镇金荣同心工业园A5栋",
				id: 0, // 使用 marker点击事件 需要填写id
				title: 'map',
				latitude: 28.212903,
				longitude: 112.833439,
				marker: [{
					id: 0,
					latitude: 28.212903, //纬度
					longitude: 112.833439, //经度
					iconPath: '', //显示的图标        
					rotate: 0, // 旋转度数
					width: 21, //宽
					height: 15, //高
					title: '深正电子', //标注点名
					alpha: 0.5, //透明度
					label: { //为标记点旁边增加标签   //因背景颜色H5不支持
						content: '长沙深正电子科技有限公司', //文本
						color: '#00256a', //文本颜色
						// 　　fontSize:24,//文字大小
						//    x:5,//label的坐标，原点是 marker 对应的经纬度
						//    y:1,//label的坐标，原点是 marker 对应的经纬度 
						//    borderWidth:12,//边框宽度
						//    borderColor:'pink',//边框颜色    
						// 　　borderRadius:20,//边框圆角                        
						// 　　bgColor:'black',//背景色
						// 　　padding:5,//文本边缘留白
						//    textAlign:'right'//文本对齐方式。
					},
					callout: { //自定义标记点上方的气泡窗口 点击有效  
						content: '长沙市雷锋镇金荣同心工业园A5栋', //文本
						color: '#ffffff', //文字颜色
						fontSize: 14, //文本大小
						borderRadius: 2, //边框圆角
						bgColor: '#00256a', //背景颜色
						display: 'ALWAYS', //常显
					},
				}],
				scale: 16
			}
		},
		methods: {
			go(e) {
				let {
					tel,
				} = e.currentTarget.dataset
				uni.makePhoneCall({
					// 手机号
					phoneNumber: tel,
				});
			}
		},
	}
</script>

<style lang="scss">
	.i-lx-zt {
		margin: 3vw;
		border-radius: 2vw;
		overflow: hidden;

		.i-lx-body {
			background-color: #fff;
			padding: 2vw;

			.flex_box {
				align-items: center;
				padding: 3vw 0;
				border-bottom: 1px solid #efefef;

				&:last-child {
					border-bottom: none;
				}
			}

			.iconfont {
				width: 9vw;
				font-size: 5vw;
				color: $base;
			}

			.flex {
				font-size: 3.6vw;

			}
		}
	}
</style>
